<!--
 * @Author: boyyang
 * @Date: 2022-01-09 11:49:11
 * @LastEditTime: 2022-02-19 22:25:18
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\modalBox\index.vue
-->

<template>
    <div class="modal-box-wrapper" @click="close" v-if="isMask">
        <div :class="['modal-box-content', { 'modal-box-h': !props.isShow }]" @click.stop>
            <div class="header-wrapper">
                <div class="header">
                    <Upload
                        @on-change="headerUploadChange"
                        :img-url="info.avatarUrl"
                        :file-size="5"
                        file-type="image/*"
                    ></Upload>
                </div>
                <div class="content">
                    <input-box prefix="昵  称" v-model:val="info.nickName"></input-box>
                    <input-box prefix="邮  箱" v-model:val="info.email" :disabled="true"></input-box>
                    <input-box prefix="省  份" v-model:val="info.province"></input-box>
                    <input-box prefix="城  市" v-model:val="info.city"></input-box>
                </div>
                <div class="btn">
                    <modal-box-btn @btnClick="submit"></modal-box-btn>
                </div>
                <div class="contact">
                    <tool-tip text="https://www.cnblogs.com/boyyangD">
                        <template #icon>
                            <i class="iconfont icon-boke1" @click="toDetail(0)"></i>
                        </template>
                    </tool-tip>

                    <tool-tip text="1761617270">
                        <template #icon>
                            <i class="iconfont icon-qq1" @click="toDetail(1)"></i>
                        </template>
                    </tool-tip>

                    <tool-tip text="https://github.com/boyyang-love">
                        <template #icon>
                            <i class="iconfont icon-GitHub" @click="toDetail(2)"></i>
                        </template>
                    </tool-tip>

                    <tool-tip text="聊天室">
                        <template #icon>
                            <i class="iconfont icon-liaotianshi" @click="toDetail(3)"></i>
                        </template>
                    </tool-tip>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { userMes, userMesUpdate, upload, app } from '@/cloudbase'
import { useMessage } from '../message'
import { useLoading } from '../fullScreenLoading'
import { useUserStore } from '@/store/modules/user'
import { tim, TIM } from '@/cloudIM'
import { env } from '@/utils/env'

interface IModalProps {
    isShow?: boolean;
}

interface IModalEmits {
    (e: 'update:isShow', type: boolean): void;
}

interface IInfo {
    avatarUrl?: string;
    nickName?: string;
    email?: string;
    city?: string;
    province?: string;
}

const userStore = useUserStore()
const router = useRouter()
const message = useMessage()
const loading = useLoading()

const props = withDefaults(defineProps<IModalProps>(), {
    isShow: true
})

const userInfo = userStore.getUserInfo
const info = reactive<IInfo>({
    nickName: userInfo?.nickName,
    email: userInfo?.email,
    city: userInfo?.location?.city,
    avatarUrl: userInfo?.avatarUrl,
    province: userInfo?.location?.province
})


const emits = defineEmits<IModalEmits>()

const isMask = ref<boolean>(false)

watch(() => props.isShow, (newVal) => {
    if (newVal) {
        isMask.value = true
    }
})

const close = () => {
    emits('update:isShow', false)
    const timer = setTimeout(() => {
        isMask.value = false
        clearTimeout(timer)
    }, 500);
}

const submit = () => {
    loading.start({ text: '信息更新中' })
    userMesUpdate(info)?.then((res) => {
        message.success('更新成功')
        loading.end()
        close()
        setTimeout(() => {
            const userInfo = userMes()
            userStore.setUserInfo(userInfo)
        }, 2000)
    })
}

// 头像上传
const headerUploadChange = (e: any) => {
    loading.start({ text: '头像上传中,请稍等!' })
    upload(e.file, 'userHeaderUpload', 'userHeader')
        .then((res) => {
            message.success('头像上传成功,请点击保存')
            const url = res.tempFileURL
            info.avatarUrl = url
            loading.end()
        })
        .catch((err) => {
            message.error(err)
            loading.end()
        })
}

const toDetail = (type: number) => {
    switch (type) {
        case 0:
            window.open('https://www.cnblogs.com/boyyangD/', '_black')
            break
        case 1:
            break
        case 2:
            window.open('https://github.com/boyyang-love', '_black')
            break
        case 3:
            router.push({
                name: 'ChatRoom'
            })
            break
        default:
            return
    }
}

</script>

<style scoped lang="scss">
.modal-box-wrapper {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    // background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    perspective: 1500px;

    .modal-box-content {
        box-sizing: border-box;
        width: 370px;
        height: 45%;
        background-color: rgba(61, 59, 79, 0.7);
        box-shadow: 5px 5px 5px 3px rgba(0, 0, 0, 0.5);
        border-radius: 3%;
        transform-origin: 0% 0%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        padding-top: 50px;

        animation: trans 0.4s linear;

        .content-text-area {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;

            .text-area {
                outline: none;
                background: none;
                border: 1px solid whitesmoke;
                font-size: 20px;
                color: whitesmoke;
                border-radius: 5px;
                padding: 10px;
                resize: none;
            }
        }
    }

    .modal-box-h {
        transform: rotateX(-90deg);
        animation: transC 0.6s linear;
    }

    @keyframes trans {
        0% {
            transform: rotateX(-90deg);
        }

        100% {
            transform: rotateX(0deg);
        }
    }

    @keyframes transC {
        0% {
            transform: rotateX(0deg);
        }

        100% {
            transform: rotateX(-90deg);
        }
    }
}

.header-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.header {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    position: absolute;
    top: -50px;

    img {
        width: 100%;
        height: 100%;
    }
}

.btn {
    margin-top: 15px;
}

.contact {
    width: 100%;
    padding: 20px 20px;

    display: flex;
    justify-content: space-around;
    align-items: center;

    i {
        font-size: 25px;
        color: whitesmoke;

        cursor: pointer;

        &:hover {
            color: #1bd1a5;
        }
    }
}

@media screen and (max-width: 1000px) {
    .modal-box-wrapper {
        .modal-box-content {
            height: 420px;
        }
    }
}
</style>
